<script setup lang="ts" name="BpmnDrawerKeyboards">
const list = ref([
  { key: '撤销', value: 'Ctrl + Z' },
  { key: '恢复', value: 'Ctrl + Shift + Z / Ctrl + Y' },
  { key: '全选', value: 'Ctrl + A' },
  { key: '缩放', value: 'Ctrl + 鼠标滚轮' },
  { key: '滚动（竖向）', value: '鼠标滚轮' },
  { key: '滚动（横向）', value: 'Shift + 鼠标滚轮' },
  { key: '编辑', value: 'E' },
  { key: '手型工具', value: 'H' },
  { key: '套索工具', value: 'L' },
  { key: '空间工具', value: 'S' },
  { key: '元素替换', value: 'R' },
  { key: '创建元素', value: 'N' },
  { key: '追加元素', value: 'A' }
])
</script>

<template>
  <div class="flex-1 table-layout">
    <div class="table-wrap">
      <el-table :data="list" border>
        <el-table-column prop="key" label="名称" />
        <el-table-column prop="value" label="快捷键" />
      </el-table>
    </div>
  </div>
</template>

<style scoped lang="scss">
.table-layout{
  position: relative;

  .table-wrap{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .el-table{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
